<!DOCTYPE html>
<html lang="en" >
<head >
    <meta charset="utf-8" >
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" >
    <meta name="description" content="" >
    <meta name="author" content="ThemeBucket" >
    <link rel="shortcut icon" href="#" type="image/png" >
    <title >Dynamic Table</title >
    <!--dynamic table-->
    <link href="/public/js/advanced-datatable/css/demo_page.css" rel="stylesheet" />
    <link href="/public/js/advanced-datatable/css/demo_table.css" rel="stylesheet" />
    <link rel="stylesheet" href="/public/js/data-tables/DT_bootstrap.css" />
    <?php $this->load->view('library/header'); ?>
    <link rel="stylesheet" href="assets/layui/css/layui.css">
    <link rel="stylesheet" href="assets/common.css"/>
    <script src="assets/layui/layui.js"></script>
</head >
<body class="sticky-header" >
<section >
    <?php $this->load->view('library/left'); ?>
    <!-- main content start-->
    <div class="main-content" >
        <?php $this->load->view('library/top'); ?>
        <!-- page heading start-->
<!--        <div class="page-heading" >-->
<!--            <h3 >-->
<!--                分类列表 </h3 >-->
<!--            <ul class="breadcrumb" >-->
<!--                <li >-->
<!--                    <a href="#" >Dashboard</a >-->
<!--                </li >-->
<!--                <li >-->
<!--                    <a href="#" >Data Tables</a >-->
<!--                </li >-->
<!--                <li class="active" > Dynamic Table</li >-->
<!--            </ul >-->
<!--        </div >-->
        <!-- page heading end-->
        <!--body wrapper start-->
        <div class="wrapper" >
            <div class="row" >
                <div class="col-sm-12" >
                    <?php $this->load->view('library/search'); ?>
                    <section class="panel" >
                      <div class="layui-text" style="padding: 15px">
<!--                        <br>-->
<!--                        <h1>-->
<!--                            Layui树形表格treetable-->
<!--                        </h1>-->
<!--                        <br>-->
                        <div class="layui-btn-group">
                            <button class="layui-btn" id="btn-expand">全部展开</button>
                            <button class="layui-btn" id="btn-fold">全部折叠</button>
<!--                            <button class="layui-btn" id="btn-refresh">刷新表格</button>-->
                        </div>
<!--                        <div class="layui-btn-group">-->
<!--                            <a class="layui-btn layui-btn-normal" href="menu.html">菜单管理</a>-->
<!--                            <a class="layui-btn layui-btn-normal" href="test.html">深度测试</a>-->
<!--                            <a class="layui-btn layui-btn-normal" href="test2.html">自定义图标</a>-->
<!--                            <a class="layui-btn layui-btn-normal" href="test3.html">多表格</a>-->
<!--                            <a class="layui-btn layui-btn-normal" href="test5.html">搜索功能</a>-->
<!--                        </div>-->
                        <table id="table1" class="layui-table" lay-filter="table1"></table>
                    </div>
                    </section>
<!--                    <section class="panel" >-->
<!--                        <div class="panel-body" >-->
<!--                            <div class="adv-table" >-->
<!--                                <table class="display table table-bordered table-striped" id="dynamic-table" >-->
<!--                                    <thead >-->
<!--                                    <tr >-->
<!--                                        <th width="3%" >#</th >-->
<!--                                        <th width="10%" >分类名称</th >-->
<!--                                        <th width="6%" class="hidden-phone" >是否显示</th >-->
<!--                                        <th width="5%" class="hidden-phone" >操作</th >-->
<!--                                    </tr >-->
<!--                                    </thead >-->
<!--                                    <tbody id="sort_container" >-->
<!--                                    <?php foreach ($cate_list as $item): ?>-->
<!--                                        <tr class="gradeU" data-id="<?= $item['cate_id'] ?>" >-->

<!--                                            <td class="center hidden-phone" ><?php echo $item['cate_id'] ?></td >-->
<!--                                            <td ><?php echo $item['cate_name']; ?>-->

<!--                                            </td >-->
<!--                                            <td ><?php echo $item['is_show'] == 1 ? '隐藏' : '展示'; ?></td >-->
<!--                                            <td class="hidden-phone" ><a-->
<!--                                                        class="btn btn-xs btn-info up_cate"-->
<!--                                                        data-cate="<?php echo $item['cate_id'] ?>" ><?php echo $item['is_show'] == 1 ? '展示' : '不展示'; ?></a >-->
<!--                                                <a-->
<!--                                                        class="btn btn-xs btn-info"-->
<!--                                                        href="<?php echo base_url("Siteweb/cat_add?cate_id=" . $item['cate_id']); ?>" >修改</a >-->
<!--                                            </td >-->
<!--                                        </tr >-->
<!--                                    <?php endforeach; ?>-->
<!--                                    </tbody >-->
<!--                                </table >-->
<!--                            </div >-->
<!--                            <div class="row-fluid" >-->
<!--                                <div class="span6" >-->
<!--                                    <div class="dataTables_paginate paging_bootstrap pagination" >-->
<!--                                        <ul >-->
<!--                                            <?php echo $pages; ?>-->
<!--                                        </ul >-->
<!--                                    </div >-->
<!--                                </div >-->
<!--                            </div >-->
<!--                        </div >-->
<!--                    </section >-->
                </div >
            </div >
        </div >
        <!--body wrapper end-->
        <!--footer section start-->
        <footer >
            2014 &copy; AdminEx by
        </footer >
        <!--footer section end-->
    </div >
    <!-- main content end-->
</section >
<?php $this->load->view('library/footer'); ?>
<!--common scripts for all pages-->
<script src="/public/js/scripts.js" ></script >
</body >
</html >
<script src="/public/js/st/Sortable.js" ></script >
<script type="text/javascript" src="/public/js/st/prettify/prettify.js" ></script >
<script type="text/javascript" src="/public/js/st/prettify/run_prettify.js" ></script >
<script >
    //商品更新
    $ ('.up_cate').click (function () {
        var _this = $ (this);
        swal ({
            title: '标记展不展示',
            showCancelButton: true,
            preConfirm: function preConfirm(value) {
                var cate_id = _this.data ('cate');
                swal ({
                    imageUrl: '/public/images/Forrest.gif',
                    title: '稍等...',
                    allowOutsideClick: false,
                    showConfirmButton: false
                });
                return $.post ("<?php echo base_url('Siteweb/cate_show');?>", {cate_id: cate_id}, function (data) {
                    return data;
                }, 'json');
            }
        }).then (function (result) {
            if (result.value) {
                var data = result.value;
                swal ({
                    type: data.status,
                    title: data.info
                }).then (function (isConfirm) {
                    location.reload ();
                });
            }
        });
    });
    /**
     * 排序
     */
    // var el = document.getElementById ('sort_container');
    // var sortable = Sortable.create (el, {
    //     animation: 150,
    //     disabled: false,
    //     dataIdAttr: 'data-id',
    //     ghostClass: 'blue-background-class',
    //     sort: true,
    //     group:{
    //
    //     }
    // });
    // sort_arr = sortable.toArray ();
    // console.log(sort_arr)
    // sortable.sort (sort_arr.reverse ())
</script >
<script src="assets/layui/layui.js"></script>
<script>
    layui.config({
        base: 'module/'
    }).extend({
        treetable: 'treetable-lay/treetable'
    }).use(['layer', 'table', 'treetable'], function () {
        var $ = layui.jquery;
        var table = layui.table;
        var layer = layui.layer;
        var treetable = layui.treetable;

        var table_data = JSON.parse('<?php echo  json_encode($format_list, JSON_NUMERIC_CHECK)?>');
        // 渲染表格
        var renderTable = function () {
            layer.load(2);
            treetable.render({
                treeColIndex: 0,
                treeSpid: -1,
                treeIdName: 'cate_id',
                treePidName: 'pid',
                treeDefaultClose: true,
                treeLinkage: false,
                elem: '#table1',
                data: [{
                      "cate_id": 1,
                      "cate_name": "xx",
                      "pid": -1
                    }
                  ],
                data: table_data,
                page: false,
                cols: [[
                    // {type: 'numbers'},
                    {field: 'cate_name', title: '名称'},
                    {field: 'id', title: 'id'},
                    {field: 'count_num', title: '产品数量'},
                    {field: 'is_show', title: '是否展示'},
                    {templet: complain, title: '操作'}
                ]],
                done: function () {
                    layer.closeAll('loading');
                }
            });
        };

        renderTable();

        $('#btn-expand').click(function () {
            treetable.expandAll('#table1');
        });

        $('#btn-fold').click(function () {
            treetable.foldAll('#table1');
        });

        $('#btn-refresh').click(function () {
            renderTable();
        });

         function complain(d){
            if(d.id && d.is_show == '显示'){
                return [
                    '<a class="btn btn-xs btn-info" style="color:#fff" lay-event="edit">修改</a>',
                     '<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">隐藏</a>',
                    ].join('');
            }else if(d.id && d.is_show == '隐藏'){
                 return [
                     '<a class="btn btn-xs btn-info" style="color:#fff" lay-event="edit">修改</a>',
                     '<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">显示</a>',
                     ].join('');
            }else{
                return '';
            }
         }

        //监听工具条
        table.on('tool(table1)', function (obj) {
            var data = obj.data;
            var layEvent = obj.event;

            if (layEvent === 'del') {
                var _this = $ (this);
                swal ({
                    title: '标记展不展示',
                    showCancelButton: true,
                    preConfirm: function preConfirm(value) {
                        var cate_id = data.id;
                        swal ({
                            imageUrl: '/public/images/Forrest.gif',
                            title: '稍等...',
                            allowOutsideClick: false,
                            showConfirmButton: false
                        });
                        return $.post ("<?php echo base_url('Siteweb/cate_show');?>", {cate_id: cate_id}, function (data) {
                            return data;
                        }, 'json');
                    }
                }).then (function (result) {
                    if (result.value) {
                        var data = result.value;
                        swal ({
                            type: data.status,
                            title: data.info
                        }).then (function (isConfirm) {
                            location.reload ();
                        });
                    }
                });
            } else if (layEvent === 'edit') {
                $(location).attr('href', 'cat_add?cate_id=' + data.id);
            }
        });
    });
</script>